<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">客服中心</view>
      <view class="nav-right"></view>
    </view>

    <!-- 客服头部信息 -->
    <view class="service-header">
      <view class="service-info">
        <image class="service-avatar" src="/static/customer-service.png" mode="aspectFill"></image>
        <view class="service-detail">
          <view class="service-name">在线客服</view>
          <view class="service-status">
            <view class="status-dot online"></view>
            <text>在线服务中</text>
          </view>
        </view>
      </view>
      <view class="service-time">
        <text>服务时间：9:00-21:00</text>
      </view>
    </view>

    <!-- 快捷服务 -->
    <view class="quick-service">
      <view class="section-title">
        <uni-icons type="star" size="20" color="#FF8C42"></uni-icons>
        <text>快捷服务</text>
      </view>
      <view class="service-grid">
        <view class="service-item" @click="handleQuickService('order')">
          <uni-icons type="shop" size="28" color="#FF8C42"></uni-icons>
          <text>订单问题</text>
        </view>
        <view class="service-item" @click="handleQuickService('payment')">
          <uni-icons type="wallet" size="28" color="#FF8C42"></uni-icons>
          <text>支付问题</text>
        </view>
        <view class="service-item" @click="handleQuickService('logistics')">
          <uni-icons type="home" size="28" color="#FF8C42"></uni-icons>
          <text>物流查询</text>
        </view>
        <view class="service-item" @click="handleQuickService('refund')">
          <uni-icons type="refresh" size="28" color="#FF8C42"></uni-icons>
          <text>退款售后</text>
        </view>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="faq-section">
      <view class="section-title">
        <uni-icons type="help" size="20" color="#FF8C42"></uni-icons>
        <text>常见问题</text>
      </view>
      <view class="faq-list">
        <view class="faq-item" @click="toggleFaq(0)">
          <view class="faq-question">
            <text>如何查看订单状态？</text>
            <uni-icons :type="faqExpanded[0] ? 'up' : 'down'" size="16" color="#999"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[0]">
            您可以在"我的订单"页面查看所有订单的详细状态，包括待付款、待发货、待收货等。
          </view>
        </view>
        
        <view class="faq-item" @click="toggleFaq(1)">
          <view class="faq-question">
            <text>如何申请退款？</text>
            <uni-icons :type="faqExpanded[1] ? 'up' : 'down'" size="16" color="#999"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[1]">
            在订单详情页面点击"申请退款"按钮，填写退款原因并提交申请，我们会在1-3个工作日内处理。
          </view>
        </view>
        
        <view class="faq-item" @click="toggleFaq(2)">
          <view class="faq-question">
            <text>配送时间是多久？</text>
            <uni-icons :type="faqExpanded[2] ? 'up' : 'down'" size="16" color="#999"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[2]">
            一般情况下，订单会在24小时内发货，配送时间为2-5个工作日，具体时间根据地区而定。
          </view>
        </view>
        
        <view class="faq-item" @click="toggleFaq(3)">
          <view class="faq-question">
            <text>如何使用优惠券？</text>
            <uni-icons :type="faqExpanded[3] ? 'up' : 'down'" size="16" color="#999"></uni-icons>
          </view>
          <view class="faq-answer" v-if="faqExpanded[3]">
            在结算页面选择可用的优惠券，系统会自动计算优惠金额。请注意优惠券的使用条件和有效期。
          </view>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section">
      <view class="section-title">
        <uni-icons type="phone" size="20" color="#FF8C42"></uni-icons>
        <text>联系我们</text>
      </view>
      <view class="contact-list">
        <view class="contact-item" @click="makeCall">
          <view class="contact-left">
            <uni-icons type="phone" size="24" color="#FF8C42"></uni-icons>
            <text>客服热线</text>
          </view>
          <view class="contact-right">
            <text>400-888-8888</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        
        <view class="contact-item" @click="openEmail">
          <view class="contact-left">
            <uni-icons type="email" size="24" color="#FF8C42"></uni-icons>
            <text>邮箱客服</text>
          </view>
          <view class="contact-right">
            <text>service@example.com</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 在线客服按钮 -->
    <view class="online-service">
      <button class="service-btn" @click="startChat">
        <uni-icons type="chat" size="20" color="#fff"></uni-icons>
        <text>开始在线咨询</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const statusBarHeight = ref(0);
const faqExpanded = ref([false, false, false, false]);

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    statusBarHeight.value = 0;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换FAQ展开状态
const toggleFaq = (index) => {
  faqExpanded.value[index] = !faqExpanded.value[index];
};

// 处理快捷服务
const handleQuickService = (type) => {
  const serviceMap = {
    order: '订单问题',
    payment: '支付问题',
    logistics: '物流查询',
    refund: '退款售后'
  };
  
  uni.showToast({
    title: `正在为您转接${serviceMap[type]}专员`,
    icon: 'none'
  });
};

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: '400-888-8888'
  });
};

// 打开邮箱
const openEmail = () => {
  uni.showToast({
    title: '正在打开邮箱应用',
    icon: 'none'
  });
};

// 开始聊天
const startChat = () => {
  uni.showToast({
    title: '正在连接客服，请稍候...',
    icon: 'loading'
  });
};

onMounted(() => {
  getStatusBarHeight();
});
</script>

<style>
.container {
  background-color: #FFF9F2;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #FFE6CC;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.service-header {
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.2);
}

.service-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.service-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #fff;
  margin-right: 20rpx;
}

.service-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.service-status {
  display: flex;
  align-items: center;
  font-size: 22rpx;
}

.status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
}

.status-dot.online {
  background-color: #4CAF50;
}

.service-time {
  font-size: 22rpx;
  opacity: 0.9;
}

.quick-service, .faq-section, .contact-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-title text {
  margin-left: 10rpx;
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
}

.service-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  transition: transform 0.3s ease;
}

.service-item:active {
  transform: scale(0.95);
}

.service-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #666;
}

.faq-list {
  border-top: 1rpx solid #FFE6CC;
}

.faq-item {
  border-bottom: 1rpx solid #FFE6CC;
  padding: 20rpx 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.faq-answer {
  margin-top: 15rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  padding-left: 20rpx;
  border-left: 3rpx solid #FF8C42;
  background-color: #FFF9F2;
  padding: 15rpx 20rpx;
  border-radius: 8rpx;
}

.contact-list {
  border-top: 1rpx solid #FFE6CC;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FFE6CC;
}

.contact-left {
  display: flex;
  align-items: center;
}

.contact-left text {
  margin-left: 15rpx;
  font-size: 26rpx;
  color: #333;
}

.contact-right {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.contact-right text {
  margin-right: 10rpx;
}

.online-service {
  padding: 30rpx 20rpx;
}

.service-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}

.service-btn text {
  margin-left: 10rpx;
}
</style>